<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<u-search :clearabled="true" v-model="searchVal" :show-action="false" placeholder="请输入报单编号搜索" @search="handleSearch" />
			</view>
			<view class="wrap">
				<view class="header-tabs">
					<u-tabs :list="list" active-color="red" :current="current" @change="tabsChange"></u-tabs>
				</view>
				<view class="header-icon" style="width: 10%;" @click="showMoreTabs">
					<!-- <u-icon name="list" size="40" color="red"></u-icon> -->
					<u-image :src="moreImg" width="40" height="40"></u-image>
				</view>
			</view>

			<!-- 展开的tabs区域 -->
			<view class="tabs-list" v-if="showAllTabs">
				<text :class=" current === index ? 'active item' : 'item'" @click="tabsChange(index)"
					v-for="(item,index) in list" :key="item.name">{{item.name}}</text>
			</view>
		</view>
		<scroll-view scroll-y :scroll-top="scrollTop" class="report-view" @scrolltolower="handleScrollToLower">
			<!-- card -->
			<view class="content">
				<view v-for="(item,index) in reportData.list" :key="item.id">
					<view class="content-item">
						<view class="title">
							<text>报单编号：{{item.order_no}}</text>
							<text style="font-size: 26rpx; color: #F0250E;font-weight: 400;">{{item.status_text}}</text>
						</view>
						<u-line color="#909399" />

						<view v-for="(reportItem,reportIndex) in item.audit_info" :key="reportItem.id">
							<view class="info">
								<view class="item">
									<template v-if="reportItem.type == 'text' || reportItem.type == 'textarea'">
										<u-row>
											<u-col span="3">
												<text class="item-title">{{reportItem.name}}：</text>
											</u-col>
											<u-col span="9">
												<text class="item-content">{{reportItem.value}}</text>
											</u-col>
										</u-row>
									</template>
								</view>
								<view v-show="item.isExpanded">
									<view class="item">
										<template v-if="reportItem.type == 'uploadImg'">
											<u-row>
												<u-col span="3">
													<text class="item-title">{{reportItem.name}}</text>
												</u-col>
												<u-col span="9">
													<u-image width="50%" height="200rpx" :src="reportItem.value"></u-image>
												</u-col>
											</u-row>
										</template>
										<template v-if="reportItem.type == 'radio' || reportItem.type == 'time'">
											<u-row>
												<u-col span="3">
													<text class="item-title">{{reportItem.name}}</text>
												</u-col>
												<u-col span="9">
													<text class="item-content">{{reportItem.value}}</text>
												</u-col>
											</u-row>
										</template>
										<template v-if="reportItem.type == 'checkbox'">
											<u-row>
												<u-col span="3">
													<text class="item-title">{{reportItem.name}}</text>
												</u-col>
												<u-col span="9">
													<text class="item-content">{{reportItem.value.join(' ')}}</text>
												</u-col>
											</u-row>
										</template>
										<template v-if="reportItem.type == 'uploadVideo'">
											<u-row>
												<u-col span="3">
													<text class="item-title">{{reportItem.name}}</text>
												</u-col>
												<u-col span="9">
													<video :src="reportItem.value" style="width: 100%;"></video>
												</u-col>
											</u-row>
										</template>
									</view>
								</view>
							</view>
						</view>
						<view class="show_more" @click="handleShowMore(item)">
							{{item.isExpanded ? '收起详情' : '显示更多详情'}}
							<u-icon :name="item.isExpanded ? 'arrow-up' : 'arrow-down'"></u-icon>
						</view>
						<view class="footer">
							<!-- 审核失败 -->
							<view class="footer-btn" v-if="item.status == 2">
								<view class="delete-btn" @click="handleDelete(item)">
									删除
								</view>
								<view class="re-edit" @click="handleEdit(item)">
									重新编辑
								</view>
							</view>

							<!-- 待到账 / 已到账  有奖励积分时需调整 footer-desc 样式-->
							<view class="footer-desc" v-if="item.status_text ==  '待到账' || item.status_text ==  '已完成'">
								<!-- <text class="credits">奖励积分：{{item.bonus_points}}</text> -->
								<view>
									<text class="credits-detail" @click="viewDetailClick(item)">
										查看积分记录
									</text>
									<u-icon name="arrow-right" color="#8C8C8C" size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>


				</view>
			</view>

		</scroll-view>



		<view class="button-container">
			<button type="warn" @click="addFormClick" class="addBtn">新增报单</button>
		</view>
	</view>
</template>

<script>
	import moreImg from '../static/image/alignment.png'
	import {
		getReportList,
		reportDelete
	} from '@/global/api/report.js'
	export default {
		data() {
			return {
				list: [{
						name: '全部',
						status: -1
					},
					{
						name: '待审核',
						status: 1
					},
					{
						name: '审核失败',
						status: 2
					},
					{
						name: '待到账',
						status: 3
					},
					{
						name: '已完成',
						status: 4
					}
				],
				current: 0,
				scrollTop: 0,
				moreImg, // 图片

				status: -1,
				page: 1,
				limit: 10,
				pageCount: 1, //总页数
				reportData: {},
				showAllTabs: false, // 控制弹出的tabs
				searchVal: ''
			}
		},
		onShow() {
			uni.hideTabBar()
			this.getReportListAPI()
		},
		methods: {
			// 搜索
			handleSearch(val) {
				console.log(val)
				const order_no = val
				this.getReportListAPI(order_no)
			},
			// 清空搜索
			handleSearchClear() {
				this.searchVal = ''
			},
			tabsChange(index) {
				this.current = index
				this.status = this.list[index].status
				console.log(this.status)
				
				this.page = 1
				this.getReportListAPI()
				if (this.showAllTabs) {
					this.showAllTabs = false
				}
			},
			showMoreTabs() {
				this.showAllTabs = !this.showAllTabs
			},
			// 控制显示更多详情
			handleShowMore(item) {
				item.isExpanded = !item.isExpanded
			},
			// 删除
			handleDelete(item) {
				uni.showModal({
					title:'删除',
					content: '是否删除？',
					success: res => {
						if (res.confirm) {
							const id = item.id
							reportDelete({
								report_id: id
							}).then(res => {
								console.log(res)
								if (res.code == 0) {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										success: () => {
											this.page = 1
											this.getReportListAPI()
										}
									})
								}

							})
							
						}
					}
				})
				
			},
			// 重新编辑
			handleEdit(item) {
				console.log(item)
				const data = {
					id: item.id,
					audit_info: item.audit_info
				}
				const json = JSON.stringify(data)
				uni.navigateTo({
					url: '/global/addForm/addForm?data=' + json
				})
			},
			// 查看积分记录
			viewDetailClick(item) {
				console.log(item)
				uni.navigateTo({
					url: '/global/IntegralLog/IntegralLog?id=' + item.id
				})
			},
			handleScrollToLower() {
				if (this.pageCount == this.page) return;
				console.log('chudi')
				this.page += 1
				this.getReportListAPI()
			},
			// 新增报单
			addFormClick() {
				uni.navigateTo({
					url: '/global/addForm/addForm'
				})
			},
			// 报单列表接口
			async getReportListAPI(order_no) {
				const params = {
					page: this.page,
					limit: this.limit,
					status: this.status
				}
				if (order_no) {
					params.order_no = order_no
				}
				console.log(params)
				uni.showLoading({
					title: '加载中',
					icon: 'none'
				})
				const res = await getReportList(params)
				this.pageCount = res.data.page_count
				uni.hideLoading()
				res.data.list.map(item => {
					this.$set(item, 'isExpanded', false)
					return item
				})
				this.reportData = res.data
				console.log(this.reportData)
				const listItems = [{
						index: 1,
						field: 'query_no_audit_count',
						suffix: '待审核'
					},
					{
						index: 2,
						field: 'query_fail_audit_count',
						suffix: '审核失败'
					},
					{
						index: 3,
						field: 'query_wait_count',
						suffix: '待到账'
					},
					{
						index: 4,
						field: 'query_over_count',
						suffix: '已完成'
					}
				];
				listItems.forEach(item => {
					this.updateListItem(item.index, item.field, item.suffix, res.data);
				});
				console.log(res)
			},
			// 在tag标签后 添加数量
			updateListItem(index, field, suffix, data) {
				this.list[index].name = `${suffix} (${data[field]})`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.u-tab-bar {
			lfet: -20rpx;
		}
		.header {
			.search {
				margin: 15rpx 20rpx;
			}

			.wrap {
				display: flex;

				.header-tabs {
					width: 90%;
				}

				.header-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: -8px 0 10px -8px #707070;
				}
			}

			.tabs-list {
				display: flex;
				flex-wrap: wrap;
				background-color: rgb(242, 242, 242);
				height: 140rpx;
				padding: 10rpx 20rpx 0px;

				.item {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 10rpx;
					border-radius: 52rpx;
					margin: 10rpx 40rpx 0 0;
					height: 60rpx;
				}

				.active {
					color: red;
				}
			}
		}

		.report-view {
			padding: 20rpx 0;
			height: 75vh;
			background: #F2F2F2;

			.content {
				// padding: 0 10rpx;

				.content-item {
					padding: 20rpx;
					margin: 0 0 20rpx;
					background-color: #fff;
					// border-radius: 30rpx;

					.title {
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
						display: flex;
						justify-content: space-between;
					}

					.info {
						.item {
							line-height: 50rpx;

							.item-title {}

							.item-content {}
						}
					}

					.show_more {
						text-align: center;
					}

					.footer {
						.footer-btn {
							display: flex;
							justify-content: flex-end;
							margin-top: 26rpx;
							.re-edit {
								text-align: center;
								line-height: 58rpx;
								width: 144rpx;
								height: 58rpx;
								background: #FDF1F0;
								border-radius: 120rpx;
								color: #F0250E;
								margin-left: 24rpx;
							}
							.delete-btn {
								text-align: center;
								line-height: 58rpx;
								color: #262626;
								width: 96rpx;
								height: 58rpx;
								background: #F2F2F2;
								border-radius: 120rpx;
							}
						}

						.footer-desc {
							display: flex;
							justify-content: flex-end; // space-between

							.credits {
								color: red;
								font-weight: bold;
							}

							.credits-detail {
								color: #8C8C8C;
							}
						}
					}
				}
			}
		}

		.button-container {
			position: fixed;
			bottom: 0;
			z-index: 99;
			width: 100%;
			height: 150rpx;
			background-color: #fff;

			.addBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 85%;
				margin-top: 16rpx;
				border-radius: 50rpx;
				height: 80rpx;
			}
		}
	}
</style>